<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta content="telephone=no,email=no" name="format-detection">
    <!--禁止自动识别电话号码和邮箱-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/payment.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script src="js/layer.js"></script>
    <script src="js/utils.js"></script>
    <title>支付</title>
</head>
<body>
<div id="vueData">
    <header>
        <div class="title_header dis_flex">
            <div @click="goBack">
                <img src="img/return_1.png" alt="">
            </div>
            <div>
                <span>闪多新零售</span>
            </div>
            <div></div>
        </div>
    </header>
    <div class="body">
        <!--地址-->
        <div class="body_address dis_flex">
            <div class="dis_flex">
                <img src="img/address.png" alt="">
            </div>
            <div class="dis_flex" v-if="contactInfo" @click="selectAddress">
                <!--位置-->
                <div>
                    <span>收货地址:{{contactInfo.cityName}}/{{contactInfo.countryName}}/{{contactInfo.receveraddr}}</span>
                </div>
                <!--人物信息-->
                <div>
                    <span>收货人:{{contactInfo.recevername}};电话:{{contactInfo.recevertel}}</span>
                </div>
            </div>
            <div class="dis_flex" @click="selectAddress" v-else>
                <!--位置-->
                <div>
                    <span>选择地址</span>
                </div>
            </div>
        </div>
        <!--店名-->
        <div class="body_shop">
            <img src="img/rectangle_1.png" alt="">
            <span class="col_hui">闪多便利店</span>
        </div>
        <!--商品-->
        <div class="body_commodity">
            <!--单个商品-->
            <div v-for="item in cart" v-if="item.count>0" class="dis_flex">
                <div>
                    <div class="body_commodity_pic">
                        <div :style="item.picture.myStyle"></div>
                    </div>
                </div>
                <div class="dis_flex">
                    <div>
                        <div class="title">{{item.commodityName}}</div>
                        <div class="subtitle">{{item.commodityDesc}}</div>
                    </div>
                    <div class="col_hui">{{item.count}}</div>
                </div>
                <div>
                    <span>小计:￥</span>
                    <span class="title">{{item.subtotal}}</span>
                </div>
            </div>
        </div>
        <!--备注-->
        <div class="body_remarks dis_flex">
            <span>备注:</span>
            <textarea rows="5" placeholder="口味,偏好等要求" v-model="remarks"
                      style="line-height:normal;"></textarea>
        </div>
    </div>
    <footer>
        <div class="dis_flex" @click="submitOrder">
            <span>微信支付</span>
            <span>&nbsp;￥&nbsp;</span>
            <span>{{totalPrice}}</span>
        </div>
    </footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let href = location.href.split('#')[0];
    let storeId = GetQueryString('storeId');
    let lat = null, lng = null;
    let localCart = localStorage.localCart;
    if (localCart) {
        localCart = JSON.parse(localCart);
    }
    var vm = new Vue({
        el: '#vueData',
        data: {
            cart: [],
            totalPrice: 0,
            contactInfo: null,
            remarks: ''
        },
        methods: {
            goBack() {
                history.go(-1);
            }, selectAddress() {
                //拉取微信用户地址
                wx.openAddress({
                    success: function (res) {
                        vm.contactInfo = {
                            cityName: res.cityName,
                            countryName: res.countryName,
                            receveraddr: res.detailInfo,
                            recevername: res.userName,
                            recevertel: res.telNumber
                        };
                        converterAddress([res.cityName, res.countryName, res.detailInfo], function (res) {
                            /*{
                                "type": "GEO_INFO",
                                "detail": {
                                    "address": "湖南省长沙市长沙县金科·时代中心",
                                    "location": {
                                        "lat": 28.229271,
                                        "lng": 113.072594
                                    },
                                    "similarity": "0.800000",
                                    "pcd_conflict_flag": "0",
                                    "gps_type": "10",
                                    "addressComponents": {
                                        "street": "金科·时代中心",
                                        "district": "长沙县",
                                        "city": "长沙市",
                                        "province": "湖南省",
                                        "country": "中国"
                                    },
                                    "similarResults": []
                                }
                            }*/
                            lat = res.detail.location.lat;
                            lng = res.detail.location.lng;
                        });
                    }
                });
            }, submitOrder() {
                if (vm.contactInfo) {
                    let orderDetails = [];
                    let commodityOrder = {
                        sellerId: storeId,
                        openId: openid,
                        remarks: vm.remarks,
                        name: vm.contactInfo.recevername,
                        phone: vm.contactInfo.recevertel,
                        address: vm.contactInfo.cityName + vm.contactInfo.countryName + vm.contactInfo.receveraddr
                    };
                    $.each(vm.cart, function (i, commodity) {
                        if (commodity.count > 0) {
                            orderDetails.push({
                                commodityId: commodity.commodityId,
                                number: commodity.count
                            });
                        }
                    });
                    commodityOrder.list = orderDetails;
                    $.ajax({
                        type: "POST",
                        url: "/shanduonewretail/jorder/payorder",
                        data: {
                            "lat": lat,
                            "lon": lng,
                            "data": JSON.stringify(commodityOrder),
                        },
                        header: {
                            'content-type':
                                'application/x-www-form-urlencoded'
                        }
                        ,
                        dataType: "JSON",
                        success:

                            function (res) {
                                if (res.success) {
                                    //发起微信支付
                                    wx.chooseWXPay({
                                        timestamp: res.timeStamp,
                                        nonceStr: res.nonceStr,
                                        package: res.package,
                                        signType: res.signType,
                                        paySign: res.paySign,
                                        success: function (res) {
                                            emptyCart();
                                            location.href = 'pay_success.html';
                                        }, fail: function (res) {
                                            toast('支付失败');
                                        }, cancel: function (res) {
                                            toast('取消支付');
                                        }
                                    });
                                } else {
                                    toast(res.errCodeDes);
                                }
                            }

                        ,
                        error: function () {
                            toast('请求错误');
                        }
                    })
                    ;
                } else {
                    toast('请选择收货地址');
                }
            }
        }
    });

    // 清空店铺购物车
    function emptyCart() {
        let ary = vm.cart;
        ary.splice(0, ary.length);
        vm.cart = ary;
        $.each(localCart, function (i, item) {
            if (storeId === item.storeId) {
                let ary1 = localCart;
                ary1.splice(i, 1);
                localCart = ary1;
                localStorage.setItem('localCart', localCart);
                return false;
            }
        });
    }

    vm.$watch('cart', function () {
        let price = 0;
        $.each(vm.cart, function (i, item) {
            price += parseFloat(item.subtotal);
        });
        vm.totalPrice = price.toFixed(2);
    });
    $(function () {
        init_wx_js_sdk(href, function (result) {
            //初始化接口环境
            wx.config({
                appId: result.appid,
                timestamp: result.timestamp,
                nonceStr: result.noncestr,
                signature: result.signature,
                jsApiList: ['editAddress', 'getLatestAddress', 'openAddress', 'chooseWXPay', 'hideMenuItems']
            });
            wx.ready(function () {
                wx.hideMenuItems({
                    menuList: ['menuItem:share:timeline', 'menuItem:share:appMessage', 'menuItem:copyUrl', 'menuItem:share:qq', 'menuItem:share:QZone', 'menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:readMode']
                });
            });
        });

        $.each(localCart, function (i, item) {
            if (storeId === item.storeId) {
                $.each(item.cartItem, function (j, iitem) {
                    item.cartItem[j].subtotal = (iitem.count * iitem.commodityPrice).toFixed(2);
                    item.cartItem[j].picture = {
                        myStyle: {backgroundImage: "url('" + iitem.commodityPicture + "')"},
                    };
                });
                vm.cart = item.cartItem;
                return false;
            }
        });
    });

    function converterAddress(contactInfo, cbOk) {
        let geocoder = new qq.maps.Geocoder({
            complete: function (results) {
                cbOk && cbOk(results);
            },
        });
        geocoder.getLocation(contactInfo.join(','));
    }
</script>
</html>